<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box {
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function() {
				
				var box = document.getElementById("box");
				// 绑定单击响应函数
				var btn = document.getElementById("btn");
				btn.onclick = function() {
	
					/*
					 * 
					 * 通过style属性只能读取和设置内联样式，无法读取和设置样式表中的样式
					 * 而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
					 * 但依然比!important的优先级低
					 * 
					 */
					box.style.width = "300px";
					box.style.height = "300px";
					box.style.backgroundColor = "yellow";
					console.log(box.style.width); 

					/*
					 * 
					 *
					 * 
					 * 
					 */












				};
			};
			
			
		</script>
	</head>
	<body>
		
		<button id="btn">点我一下</button>
		<br /><br />
		<div id="box"></div>
		
	</body>
</html>
